import React, { Component } from 'react'

export default class  Image extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
    //因为最外面的photo的样式是公用的所以可以通过className的方式直接加载上
            <div className="photo"
                 style={this.props.photoWrapStyle.photo}
                 id={"photo_"+this.props.image.num}
                 >

                <div className="photo-wrap"
                     style={this.props.photoWrapStyle.photo_front}>
                    <div className="side side-front">
                        <p className="image">
                            <img
                                id={"img_"+this.props.image.num}
                                onClick={this.props.onClickPhoto}
                                 src={this.props.image.url}
                                alt={ this.props.image.name } />
                        </p>
                        <p className="caption" >{ this.props.image.caption }</p>
                    </div>
                    <div className="side side-back">
                        <p className="desc"
                           onClick={this.props.onClickPhoto}
                           id={"img_"+this.props.image.num}>
                            {this.props.image.desc}
                        </p>
                    </div>
                </div>
            </div>
        )
    }

}

